<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        <i class="fa fa-dashboard"></i>
        <label>能效看板</label>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-6">
            <div class="box box-default">
                <div class="box-header with-border">
                    <span class="box-title"><label>当月能耗费用</label></span>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="monthFeeChart_pie" class="height-250"></div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>

        <div class="col-xs-6">
            <div class="box box-default">
                <div class="box-header with-border">
                    <span class="box-title"><label>CO<sub>2</sub>排放量</label></span>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="co2BudgetChart" class="height-250"></div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="nav-tabs-custom" id="report-container">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab_electric" data-toggle="tab"
                           meter-type="<%= meterTypes.ElectricityMedium.type %>"><label>电能年度对比</label></a>
                    </li>
                    <li>
                        <a href="#tab_water" data-toggle="tab"
                           meter-type="<%= meterTypes.WaterMedium.type %>"><label>水能年度对比</label></a>
                    </li>
                    <li>
                        <a href="#tab_gas" data-toggle="tab"
                           meter-type="<%= meterTypes.GasMedium.type %>"><label>气能年度对比</label></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="tab_electric">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="chart">
                                    <div id="budgetChart_electric" class="height-350">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <div class="tab-pane fade" id="tab_water">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="chart">
                                    <div id="budgetChart_water" class="height-350">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <div class="tab-pane fade" id="tab_gas">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="chart">
                                    <div id="budgetChart_gas" class="height-350">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">
    $('.content-wrapper').ace_ajax('loadScripts', [null, null], function () {

        let types = {};

        let monthlyEnergyCosts = function (id) {
            G.chart.showLoading(id);
            $.ajax({
                type: 'GET',
                url: '/monthlyEnergyCosts/' + (moment().month() + 1),
                dataType: 'json'
            }).done(function (e) {
                let obj = {};
                obj.seriesName = '月度费用';
                obj.datas = e.map(x => {
                    x.name = types[x.name].value;
                    return x
                });
                G.chart.showChart(id, G.chart.initPieOption(obj));
            });
        };

        let co2BudgetChart = function (id) {
            G.chart.showLoading(id);
            $.ajax({
                type: 'GET',
                url: '/carbonDioxideEmissions',
                dataType: 'json'
            }).done(function (e) {
                let obj = {};
                obj.xData = [moment().year() - 2, moment().year() - 1, moment().year()];
                obj.datas = e.map(x => {
                    x.name = types[x.name].value;
                    return x
                });
                G.chart.showChart(id, G.chart.initLineAndBarOption(obj))
            });
        };

        let annualComparison = function (id, type) {
            G.chart.showLoading(id);
            $.ajax({
                type: 'GET',
                url: '/annualComparison/' + type,
                dataType: 'json'
            }).done(function (e) {
                let obj = {};
                obj.xData = (() => {
                    let data = [];
                    for (let i = 1; i < 13; i++) {
                        data.push(i + '月')
                    }
                    return data;
                })();
                obj.datas = e.map(x => {
                    if (String(x.name).indexOf('Budget') !== -1) {
                        x.name = types[x.name].value;
                    } else {
                        x.name = x.name + '年'
                    }
                    return x;
                });
                G.chart.showChart(id, G.chart.initLineAndBarOption(obj))
            });
        };

        monthlyEnergyCosts('monthFeeChart_pie');
        co2BudgetChart('co2BudgetChart');
        annualComparison('budgetChart_electric','ele');

        $('#report-container').find('.nav-tabs a').on('shown.bs.tab', function (event) {
            let $this = $(this);
            let id = $this.prop('href').split('#')[1].replace('tab', 'budgetChart');
            let type = $this.attr('meter-type');
            annualComparison(id, type);
        });
    });
</script>
